/**
 * Collection
 * Created by li-rz on 16-12-12.
 */

import './PersonalCollection.scss';

import React from 'react';
import PersonalAbstractSection from '../PersonalAbstractSection.jsx';

class PersonalCollection extends PersonalAbstractSection {
    constructor(props) {
        super(props);
    }

    unCollectCourseWrap(historyId,course,e){
        const {unCollectCourse} = this.props
        unCollectCourse(historyId,course)
    }

    /**
     * Section Element
     * @returns {XML}
     */
    createSectionElement() {
        var self = this

        var lists = this.props.collectedCourses
        lists = lists.filter((e) => {
            return typeof e.Course !== "undefined" && e.Course !== null
        })
        lists = lists.map((e,i) => {
            return <li key={i} className="mooc-collection-item">
                <div>
                    <div className="mooc-collection-tag">
                        <div className="triangle left">

                        </div>
                        <div className="triangle right">

                        </div>
                    </div>
                    <div className="left mooc-collection-image table">
                        <img src={e.Course.cover} className="course_cover"/>
                    </div>
                    <div className="right mooc-collection-statement table">
                        <div className="statement">
                            <p>{e.Course.description}</p>
                        </div>
                        <div className="mooc-collection-cancel table">
                            <span onClick={self.unCollectCourseWrap.bind(self,e.id,e.Course)}>取消收藏</span>
                        </div>
                    </div>

                </div>
            </li>
        })


        // Need definition
        return(<div>
            <ul className="mooc-collection-list">
                {lists}
            </ul>
        </div>)
    }

}

export default PersonalCollection